<!-- 上传图片的操作 -->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/uploadImg' }">
                个人信息
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form
                :model="editForm"
                :rules="editFormRules"
                ref="editFormRef"
                label-width="70px"
            >
                <el-form-item label="登录名" prop="loginName">
                    <el-input
                        v-model="editForm.loginName"
                        :disabled="true"
                    ></el-input>
                    <!-- <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-search"
              ></el-input> -->
                </el-form-item>
                <el-form-item label="用户名" prop="realname">
                    <el-input v-model="editForm.realname"></el-input>
                </el-form-item>

                <el-form-item label="电话" prop="phone">
                    <el-input
                        v-model="editForm.phone"
                        :disabled="true"
                    ></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="idCard">
                    <el-input
                        v-model="editForm.idCard"
                        :disabled="true"
                    ></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-select v-model="editForm.sex" placeholder="请选择性别">
                        <el-option
                            v-for="item in sexOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        >
                        </el-option>
                    </el-select>
                    <!-- <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-search"
              ></el-input> -->
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="editForm.address"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="address">
                    <el-upload
                        class="avatar-uploader"
                        action="/api/file/uploadImage"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :headers="{Authorization:getToken}"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="footerButton">
                <el-button type="primary" @click="editUserInfo"
                    >修改信息</el-button
                >
            </div>
        </el-card>
    </div>
</template>

<script>
import Qs from "qs";
import { mapMutations, mapGetters } from "vuex";
import * as type from "../../store/mutation-types";
export default {
    name: "UploadUserInfo",
    data() {
        return {
            imageUrl: "",
            editForm: {
                id: 0, //用来进行修改的地方
                name: "",
                param: "",
                type: "",
                reserve1: "",
            },
            sexOptions: [
                { value: 1, label: "男" },
                { value: 0, label: "女" },
            ],
            editFormRules: {
                realname: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur",
                    },
                ],
                loginName: [
                    {
                        required: true,
                        message: "请输入登录名",
                        trigger: "blur",
                    },
                    {
                        min: 5,
                        max: 11,
                        message: "长度在 5 到 11 个字符",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入电话",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        max: 11,
                        message: "长度必须是11位数",
                        trigger: "blur",
                    },
                ],
                idCard: [
                    {
                        required: true,
                        message: "请输入身份证号",
                        trigger: "blur",
                    },
                    {
                        min: 18,
                        max: 18,
                        message: "长度必须在18的位数",
                        trigger: ["blur", "change"],
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入地址",
                        trigger: "blur",
                    },
                ],
                sex: [
                    { required: true, message: "请输入性别", trigger: "blur" },
                ],
            },
        };
    },
    computed: {
        ...mapGetters([
            //把 `this.getEditProduct` 映射为 `this.$store.getters.getEditProduct`
            "getCurUser",
            "getToken"
        ]),
    },
    mounted() {
        this.editForm = this.getCurUser.sysUser; //设置值
        this.imageUrl = this.getCurUser.img;
    },
    methods: {
        ...mapMutations({
            setCurUserImg: type.UPDATE_CURUSER_IMG, //辅助函数进行了映射
            setCurUser: type.SET_CUR_USER,
        }),
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(res);
            if (res.code == 200) {
                this.$message.success("修改头像成功！"); //信息的提示
                this.setCurUserImg(res.data); //这个是使用到了辅助函数，
                this.editForm.img = res.data;      
            } else {
                this.$message.success("修改头像失败！"); //信息的提示
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        async editUserInfo() {
            this.$refs.editFormRef.validate(async (valid) => {
                if (!valid) return; //现在是验证成功了！！！
                const { data: res } = await this.$http.post(
                    "sysuser/updateCurUserInfo",
                    Qs.stringify(this.editForm)
                );
                if (res.code != 200) {
                    return this.$message.error("更新失败！");
                }
                this.$message.success("更新成功！");            //需要在在这个位置进行设置
                this.setCurUser(res.data);          //更新当前的用户信息
            });
        },
    },
};
</script>

<style lang="less"  scoped>
.el-upload {
    border: 1px dashed #222020;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload:hover {
    border-color: #111111;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #1e1f20;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    width: 480px;
}

.footerButton {
    text-align: right;
}
</style>
